<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable } from "element-plus"
import Header from "@/views/content/util/header.vue"
import { onMounted, ref, computed, defineEmits } from "vue"
import{} from '@/apis/staffApi'
//组件
import Limit from "@/views/content/util/limit.vue"

const loadingItemList = ref(false)
const getLimitItemList = (displayedItemList: Array<Object>) => {
    // console.log("接收：")
    // console.log(displayedItemList)
    limitItemList.value = displayedItemList
}

const itemList = ref([])
const limitItemList = ref([])

const getItemList = async () => {
    //loadingItemList.value = true
    // const res: res = await getStaffListApi()
    // itemList.value = res.data
    // if (res.code == 0) {
    //     loadingItemList.value = false
    // }
}
onMounted(() => {
    getItemList()
})
</script>

<template>
  <div style="width: 97%;">
    <Header title="操作日志"></Header>
    <div>
      <div v-show="!loadingItemList" style="margin-top: 20px">
        <el-table :data="limitItemList" :row-key="(row) => row.id"  
          :header-cell-style="{background:'rgb(243, 243, 243)',color:'#606266'}"
          >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="店铺ID" prop="groupId"></el-table-column>
          <el-table-column label="员工姓名" prop="name"></el-table-column>
          <el-table-column label="操作时间" prop="name"></el-table-column>
          <el-table-column label="操作内容" prop="name"></el-table-column>
          <el-table-column label="操作" prop="">
            <template #default="{ row }">
              <div class="button-container">
                <el-button class="caozuo-button" type="primary">详情</el-button>
               
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-show="loadingItemList" style="display: flex;justify-content: center;">
                <img src="@/assets/images/loading.gif" />
            </div>

      <div><Limit :itemList="itemList" @updateItemList="getLimitItemList" /></div>
    </div>
  </div>
</template>
<style scoped>
::v-deep .el-table th > .cell {
  color: black;
}
.caozuo-button {
  width: 30px;
  height: 15px;
  font-size: 10px;
}
</style>
